import React from "react";
import { Tabs, Form, Input, Button, Card, Avatar, Steps } from "antd";
import "./index.less";

const { TabPane } = Tabs;

const Pg3: React.FC = () => {
  return (
    <div className="pg3-container" data-oid="ia-li60">
      <div className="pg3-process" data-oid="l7gydym">
        <h3 data-oid="q8aww26">审批进程</h3>
        <Steps direction="vertical" current={1} data-oid="_z6l:l0">
          <Steps.Step
            title="发起审批"
            description="2024-03-21 10:00"
            status="finish"
            data-oid="x25l46x"
          />

          <Steps.Step
            title="项目负责人审批"
            description="进行中"
            status="process"
            data-oid=".e4jiiu"
          />

          <Steps.Step
            title="技术负责人审批"
            description="待处理"
            status="wait"
            data-oid="j:7fbma"
          />

          <Steps.Step
            title="完成"
            description="待处理"
            status="wait"
            data-oid="qk0.9d9"
          />
        </Steps>
      </div>
      <div className="pg3-content" data-oid="u5w._3y">
        <h1 data-oid="8vhc:ua">项目需求内容变更</h1>

        <Tabs defaultActiveKey="1" data-oid="apgfq69">
          <TabPane tab="变更信息" key="1" data-oid="sjh8mf_">
            <Card className="pg3-card" data-oid="sjm5:ee">
              <h2 data-oid="bxja7z6">特性信息</h2>
              <Form layout="vertical" data-oid="s-psiev">
                <div className="pg3-form-grid" data-oid="b__cvbu">
                  <Form.Item label="特性名称" data-oid="rwd8qet">
                    <Input
                      disabled
                      defaultValue="东方国际"
                      data-oid="vac_y_4"
                    />
                  </Form.Item>
                  <Form.Item label="特性编号" data-oid="wyl._eu">
                    <Input
                      disabled
                      defaultValue="IT990946-F8268695589"
                      data-oid="8nkd158"
                    />
                  </Form.Item>
                  <Form.Item label="所属专题" data-oid="dwu3qwr">
                    <Input
                      disabled
                      defaultValue="专题特性送审测试"
                      data-oid="h06wpfy"
                    />
                  </Form.Item>
                  <Form.Item label="所属专题编号" data-oid="67xymtf">
                    <Input
                      disabled
                      defaultValue="IT990946-E153"
                      data-oid="f05fq.d"
                    />
                  </Form.Item>
                  <Form.Item label="特性负责人" data-oid="auyw-3f">
                    <Input
                      disabled
                      defaultValue="伍留/80293464"
                      data-oid="7mmj7jg"
                    />
                  </Form.Item>
                  <Form.Item label="特性状态" data-oid="i:gao1m">
                    <Input disabled defaultValue="开发中" data-oid="5p1ta7." />
                  </Form.Item>
                </div>
              </Form>
            </Card>

            <Card className="pg3-card" data-oid="6hie38g">
              <h2 data-oid="4.y7f29">变更说明</h2>
              <Form layout="vertical" data-oid="mwg_mil">
                <Form.Item label="变更原因" data-oid="agqpslz">
                  <Input disabled defaultValue="其他" data-oid="4ui:hw7" />
                </Form.Item>
                <Form.Item label="变更说明" data-oid=":gwe.au">
                  <Input.TextArea
                    disabled
                    rows={4}
                    defaultValue="1212"
                    data-oid="y.c1l2k"
                  />
                </Form.Item>
                <Form.Item label="变更文档" data-oid="0n89b8k">
                  <div className="pg3-upload" data-oid="2xzzcfn">
                    无
                  </div>
                </Form.Item>
              </Form>
            </Card>

            <div className="pg3-actions" data-oid="rwqk7y1">
              <Button data-oid="vurtpod">关闭</Button>
              <Button data-oid="eq40610">保存</Button>
              <Button type="primary" danger data-oid="jbifgcj">
                拒绝
              </Button>
              <Button type="primary" data-oid="thsurl8">
                同意
              </Button>
            </div>
          </TabPane>
          <TabPane tab="信息通知" key="2" data-oid="frudr5r">
            <Card className="pg3-card" data-oid="gk13xbo">
              <h2 data-oid="aw9a_q1">通知记录</h2>
              <div className="pg3-notification-list" data-oid="bd.u5yh">
                <div className="pg3-notification-item" data-oid="sa7l07i">
                  <div className="pg3-notification-time" data-oid="2iv1a:q">
                    2024-03-21 10:00
                  </div>
                  <div className="pg3-notification-content" data-oid="gmb.mrv">
                    系统已通知项目负责人进行审批
                  </div>
                </div>
              </div>
            </Card>
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
};

export default Pg3;
